<template>
    <div class="goods-wrap df">
        <div class="left fn" ref="MyScrollRef">
            <van-sidebar v-model="activeKey">
                <van-sidebar-item @click="handelClick" v-for="(v, i) in goodsName" :key="i" :title="v" />
            </van-sidebar>
        </div>
        <div class="right f1" ref="MyScrollTwoRef">
            <div>
                <div class="right-content" v-for="item in goodsList" :key="item.name">

                    <h1 class="right-title">{{ item.name }}</h1>
                    <van-card @click="toGoodsDetail(food)" v-for="(food) in item.foods" :key="food.id" :price="food.price"
                        :desc="food.goodsDesc" :title="food.category" :thumb="food.imgUrl">
                        <template #footer>
                            <div class="df aic acount">
                                <van-button class="add" round type="primary" size="mini"
                                    @click.stop="ADD_ACOUNT(food.id)">+</van-button>
                                <span v-if="Number(food.acount)" class="num">{{ food.acount }}</span>
                                <van-button v-if="Number(food.acount)" @click.stop="REDUCE_ACOUNT(food.id)" round
                                    type="primary" size="mini">-</van-button>
                            </div>
                        </template>
                    </van-card>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

import { mapGetters, mapState, mapMutations } from 'vuex';
import BScroll from '@better-scroll/core'
export default {

    data() {
        return {
            activeKey: '',
            domHeight: [],
            loading: false
        }
    },
    mounted() {

    },
    watch: {
        goodsList() {
            this.getBscroll()
        }
    },
    methods: {
        ...mapMutations('shop', ['ADD_ACOUNT', 'REDUCE_ACOUNT']),
        // 获取bscroll
        getBscroll() {
            this.$nextTick(() => {
                this.bs1 = new BScroll(this.$refs.MyScrollRef, {
                    click: true,
                    probeType: 3
                })
                this.bs2 = new BScroll(this.$refs.MyScrollTwoRef, {
                    click: true,
                    probeType: 3
                })

                // 获取盒子dom
                let goodsNodes = document.querySelectorAll('.right-content')

                goodsNodes.forEach((el) => {
                    this.domHeight.push(el.clientHeight)
                })

                // 正在滚动
                this.bs2.on('scroll', ({ y }) => {
                    if (this.loading) return
                    this.domHeight.reduce((total, cur, index) => {
                        if (Math.abs(y) > total && Math.abs(y) < total + cur) {
                            this.activeKey = index
                        }
                        return total + cur
                    }, 0)
                })

                // 滚动结束
                this.bs2.on('scrollEnd', () => {
                    this.loading = false
                })
            })

        },
        handelClick(index) {
            this.loading = true
            this.activeKey = index
            // 获取dom
            let goodsNodes = document.querySelectorAll('.right-content')

            this.bs2.scrollToElement(goodsNodes[this.activeKey], 500)

            // console.log(goodsNodes[6]);
        },
        toGoodsDetail(food) {
            // console.log(food);
            this.$router.push({
                name: 'detail',
                params: food
            })
        }
    },
    computed: {
        ...mapState('shop', ['goodsList']),
        ...mapGetters('shop', ['goodsName']),

    },


}
</script>

<style lang="scss" scoped>
.goods-wrap {
    height: 100%;
    padding-bottom: 250px;
    .left {
        height: 100%;
      
    }
}

.right {
    .right-content {
        .right-title {
            font-size: 16px;
            height: 30px;
            background-color: #f4f4f4;
            line-height: 30px;
            border-left: 6px solid #dddddd;
            color: #575757;
            text-indent: 10px;
        }

        .van-card {
            background-color: #fff;

            .acount {
                flex-direction: row-reverse;

                .num {
                    font-size: 18px;
                    margin: 0 2px 0 4px;
                }
            }

        }
    }
}

.shop-car {
    position: fixed;
    bottom: 10px;
    left: 8px;
    right: 8px;
}

.van-button {
    text-align: center;
    line-height: 22px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 1px solid #999;
    color: #999;
    font-size: 20px;
}

.add {
    border: none;
    background-color: #ffc300;
    color: #000;
}
</style>